<template>
  <div class="right-wrong-container">
    <askStatus :is-analysis="isAnalysis" :is-correct="correct" />

   
    <div class="right-slide">
      <div class="right-title">{{questions.content}}</div>
    <div class="checkAll-status">
      <div class="all-infos">
        <div  class="yes">Yes</div>
        <div class="no">No</div>
      </div>
      <div class="lists">
        <div class="list-item" v-for="(v,i) in questions.list" :key="i">
          <div class="item-status">
            <div class="item-box">
              <span class="item-around"></span>
            </div>
            <div class="item-box">
              <span class="item-around"></span>
            </div>
          </div>
          <div class="item-content">{{v.text}}</div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
// impo
import AskStatus from './askStatus.vue'
const props = defineProps({
  questions: {
    type: Array,
    default: () => []
  },
  isAnalysis:{
    type:Boolean,
    default:true
  },
  correct:{
    type:Boolean,
    default:true
  },
  isReview: {
    type: Boolean,
    default: false
  }
})

</script>

<style lang="scss" scoped>
.right-wrong-container {
  display: flex;
  // flex-direction: column;
  // gap: 1rem;

 .all-infos{
  // padding-bottom: 10px;
  display: flex;
  padding:10px;
  align-items: center;
  font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
line-height: 16.8px;
letter-spacing: 0%;
color:#999;
gap:8px;
 }
}
.list-item{
  display: flex;
  align-items: center;
  padding: 10px;
  .item-status{
    display: flex;
    align-items: center;
    margin-right: 10px;
    gap: 8px;
    .item-box{
      width: 24px;
      height: 24px;
      border:1px solid #ccc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      .item-around{
        width: 16px;
        height: 16px;
        border: 1px solid #ffff;
        border-radius: 50%;
        display: inline-block;
      }
    }
  }
}
</style>